<template>
  <div class="container">
    <div class="container-header">
      <img src="../../img/meituan.jpg" alt="美团">
    </div>
    <div class="container-body">
      <img src="../../img/login.jpg" alt="登陆">
      <div class="input-container">
        <div v-show="showErrorTips" class="input-error">
          <span class="iconfont">&#xe613;</span>
          <span>请输入账号和密码</span>
        </div>
        <div class="input-top">
          <span class="input-top-left">账号登陆</span>
          <div class="input-top-right">
            <span>手机动态码登陆</span>
            <span class="iconfont">&#xe660;</span>
          </div>
        </div>
        <div class="input-main">
          <div class="input-main-one">
            <div class="icon-container">
              <span style="font-size: 15px; color: #aaa;">+</span>
              <span style="font-size: 15px; color: #646464; margin-left: -5px;">86</span>
              <span class="iconfont">&#xe60c;</span>
            </div>
            <input  @keyup.enter="login" ref="phoneInput" @blur="blurInput" v-model="phoneNumber" placeholder="手机号" type="tel">
          </div>
          <div class="input-main-two">
            <span class="iconfont">&#xe60a;</span>
            <input @keyup.enter="login" ref="passInput" @blur="blurInput" v-model="passWord" placeholder="密码" type="password">
          </div>
          <span @click="forgetPass" class="input-main-three">
            <span>
              忘记密码?
            </span>
          </span>
          <div @click="login" class="input-main-four">登陆</div>
          <div class="input-main-five">
            还没有账号
            <span @click="freeRegister">免费注册</span>
          </div>
        </div>
      </div>
    </div>
    <CommonFooters/>
  </div>
</template>

<script>
import axios from 'axios'
import { mapActions } from 'vuex'
import CommonFooters from '../Common/commonFooters'
export default {
  name: 'Login',
  data() {
    return {
      /** 展示错误提示 */
      showErrorTips: false,
      phoneNumber: '',
      passWord: ''
    }
  },
  methods: {
    ...mapActions(['saveUserInformation']),
    /** 忘记密码 */
    forgetPass() {
      this.$router.push('/findPassword')
    },
    /** 统一的失焦 */
    blurInput() {
      this.showErrorTips = false
    },
    /** 提示 */
    messageTips(type, msg) {
      this.$Message[type]({
        background: true,
        content: msg
      })
    },
    /** 登陆 */
    async login() {
      if (this.phoneNumber && this.passWord) {
        this.showErrorTips = false
        let res = await this.$api.login({ passWord: this.passWord, phone: this.phoneNumber})
        let { code, msg } = res
        if (code === 0) {
          let { username } = res
          this.saveUserInformation(username)
          this.messageTips('success', msg)
          if (JSON.stringify(this.$route.query).length !== 2) 
            this.$router.push(this.$route.query.redirect)
          else 
            this.$router.push('/')
        } else {
          this.messageTips('error', msg)
        }
      } else {
        if(this.phoneNumber) {
          this.$refs.passInput.style.borderColor = '#F76120'
          this.$refs.phoneInput.style.borderColor = '#aaa'
        } else {
          this.$refs.passInput.style.borderColor = '#aaa'
          this.$refs.phoneInput.style.borderColor = '#F76120'
        }
        this.showErrorTips = true
      }
      this.$store.dispatch('clearCityInfo')
    },
    /** 免费注册 */
    freeRegister() {
      this.$router.push('/register')
    }
  },
  components: {
    CommonFooters
  }
}
</script>

<style lang="scss" scoped>
@import 'scss/common.scss';
  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    &-header {
      width: 45%;
      height: 170px;
      display: flex;
      align-items: center;
      img {
        width: 120px;
        height: 80px;
      }
    }
    &-body {
      width: 45%;
      display: flex;
      margin-bottom: 60px;
      justify-content: space-between;;
      img {
        width: 480px;
        height: 370px;
      }
      .input-container {
        width: 300px;
        padding-top: 20px;
        height: 300px;
        margin-right: 50px;
        position: relative;
        display: flex;
        flex-direction: column;
        .input-error {
          width: 100%;
          position: absolute;
          top: -30px;
          border: 1px solid #f5d8a7;
          border-radius: 2px;
          margin-bottom: 10px;
          line-height: 42px;
          padding-left: 5px;
          box-sizing: border-box;
          background: #fff6db;
          color: #666;
          .iconfont {
            color: #FF8800;
          }
        }
        .input-top {
          display: flex;
          height: 30px;
          align-items: center;
          justify-content: space-between;
          &-left {
            font-weight: 400;
            color: #666;
            font-size: 16px;
          }
          &-right {
            font-size: 13px;
            color: #666;
            .iconfont {
              font-size: 16px;
            }
          }
        }
        .input-main {
          display: flex;
          flex-direction: column;
          &-one {
            margin-top: 6px;
            position: relative;
            .icon-container {
              top: 50%;
              transform: translateY(-50%);
              position: absolute;
              .iconfont {
                font-size: 12px;
              }
            }
            input {
              box-sizing: border-box;
              padding-left: 40px;
              width: 300px;
              height: 38px;
              outline: none;
              border: 1px solid #aaa ;
              &:focus {
                border: 1px solid #FE8C00 ;
              }
            }
          }
          &-two {
            @extend .input-main-one;
            margin-top: 20px;
            .iconfont {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              font-size: 22px;
              color: #aaa;
              left: 5px;
            }
          }
          &-three {
            display: flex;
            justify-content: flex-end;
            margin-top: 5px;
            font-size: 13px;
            span {
              color: #FE8C00;
              line-height: 20px;
              cursor: pointer;
              padding: 0 2px;
              border: 1.5px solid #fff;
              &:active {
                border: 1.5px solid #000;
                border-radius: 3px;
              }
            }
          }
          &-four {
            @include flex-center;
            width: 100%;
            height: 40px;
            margin-top: 12px;
            cursor: pointer;
            font-weight: bold;
            font-size: 16px;
            background: linear-gradient(135deg,#FFD000 0,#FFBD00 100%);
          }
          &-five {
            margin-top: 10px;
            font-size: 16px;
            span {
              cursor: pointer;
              color: #FE8C00;
            }
          }
        }
      }
    }
   
  }
</style>